<template>
	<view class="wrapper">
		
		<view class="outtop">
			<view class="topwrapper" :style="{paddingTop:statusBarHeight+'px'}">
				<view class="addressSelect" @click="showCityPicker" :style="{height:menuButtonHeight+'px'}">
					<view class="addres">{{sameCity.name}}</view>
					<view class="downicon"></view>
				</view>
				<view class="tit">人人聚商城</view>
			</view>	
			
			<view class="swiperwrapper">
				<swiper class="swiper" :indicator-dots="true" :autoplay="true" :duration="500" indicator-active-color="#fff" indicator-color="rgba(0,0,0,.2)">
					<swiper-item class="sitem" v-for="item in bannersList" :key="item.id">
						<image :src="config.cdnurl + item.url" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
			</view>
			
		</view>
		
		
	
		<view class="menuwrapper">
			<swiper class="menuswiper">
				<swiper-item v-for="(item,index) in subbussinfo" :key="index" >
					<view class="menuitemwrapper">
						<view class="menuitem"  v-for="it in item" :key="it.id" @click="getshopgoodsbytype(it,0)">
							<image :src="config.cdnurl + it.img"></image>
							<view class="name">{{it.name}}</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="flwrapper" style="height:40rpx;">
			<!-- <image src="/static/images/fl.png"></image> -->
		</view>
		<view class="tagwrapper" v-if="tuangouThree.length>0">
			<view class="tgwrapper">
				<view class="title">
					<view class="name">团购</view>
					<view class="desc" @click="gototuangou">限时活动 查看更多 ></view>
				</view>
				<view class="prolist">
					<view class="item" v-for="item in tuangouThree" :key="item.gid" @click="handleShop(item.id)">
						<image :src="item.gimage"></image>
						<view class="name">{{item.gtitle}}</view>
						<view class="price">￥{{item.price}}</view>
					</view>
					
				</view>
			</view>
<!-- 			<view class="ptwrapper">
				<view class="title">
					<view class="name">拼团</view>
					<view class="desc">优惠提前享</view>
				</view>
				<view class="prolist">
					<view class="item">
						<image src="/static/images/default/screen_icon_new.png"></image>
						<view class="name">安格斯牛排</view>
						<view class="price">￥9.9</view>
					</view>
					<view class="item">
						<image src="/static/images/default/screen_icon_new.png"></image>
						<view class="name">安格斯牛排</view>
						<view class="price">￥9.9</view>
					</view>
				</view>
			</view>
			<view class="tjwrapper">
				<view class="title">
					<view class="name">特价商品</view>
					<view class="desc">优惠提前享</view>
				</view>
				<view class="prolist">
					<view class="item">
						<image src="/static/images/default/screen_icon_new.png"></image>
						<view class="name">安格斯牛排</view>
						<view class="price">￥9.9</view>
					</view>
					<view class="item">
						<image src="/static/images/default/screen_icon_new.png"></image>
						<view class="name">安格斯牛排</view>
						<view class="price">￥9.9</view>
					</view>
				</view>		
			</view> -->

		</view>
		
		<view class="smallmenuwrapper">
			<view class="smallwrapper">
					<view class="smallitem" :class="{active:index == subindex && subindex !== ''}"
						v-for="(item,index) in subtypeList" :key="item.id" @click="getshopgoodsbytype(item,1)">{{item.name}}
					</view>
			</view>	
		</view>
		
		<view class="guesswrapper">
			<view class="title">猜你喜欢</view>
			<view class="desc">智能推荐你感兴趣的优品</view>
		</view>
		
		<view class="listwrapper">
			<view class="itemwrapper"  @click="handleShop(item.id)" v-for="item in shopgoodsList" :key="item.id">
				<image mode="aspectFill" class="pic" :src="item.gimage"></image>
				<view class="descwrapper">
					<view class="namewrapper">
						<view class="name">{{item.gtitle}}</view>
						<!-- <image src="/static/images/gwc.png"></image> -->
					</view>
					<view class="pricewrapper">
						<view class="price">￥{{item.price}}</view>
						<!-- <view class="oldprice">￥98.8</view> -->
					</view>					
				</view>
			</view>
			
		</view>
	<!--定位选择城市-->
	<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
		@onConfirm="onConfirm">
	</mpvue-city-picker>
	</view>
</template>

<script>
	import config from "../common/config/config.js"
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
	
	export default {
		data() {
			return {
				menuButtonHeight:0,
				statusBarHeight:0,
				sameCity: {
					name: ' 定位中..'
				},
				config,
				typeList:[],
				bannersList:[],
				bussinfoList:[],
				subbussinfo:[],
				shopgoodsList:[],  //商品页面
				tuangouThree:[],
				subtypeList:[], //子类别
				
				cityPickerValueDefault: [0, 0, 1],
				params: {
					search: '',
					type:'', //1美食 2外卖 3甜品饮料 4休闲娱乐
					orderType:1,//1推荐 2距离
					longitude: '',
					latitude: '',
					province:"",
					city:"",
					area:'',
					page: 1,
				},
			}
		},
		components: {	
			mpvueCityPicker,	
		},
		async onLoad() {
			
			
			const sys = uni.getSystemInfoSync();
			this.wanlsys = {
				headTop: sys.statusBarHeight,
				windowWidth: sys.windowWidth,
				windowHeight: sys.windowHeight,
				windowBottom: 0
			};
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.menuButtonHeight = menuButtonInfo.height;
			this.statusBarHeight = menuButtonInfo.top;
			
			await this.getBanners();
			this.getAddress().then(res=>{
				this.getBussinfoList();
				
				//获取团购前三个
				this.getTuanGouThree();
				
				this.getTypes();
				
				this.initgetshopgoods();
			})
		

			
			
		},
		methods: {
			
			
			//三级联动
			onConfirm(e) {
				console.log(e);
				this.pickerText = JSON.stringify(e)
				let arr = e.label.split("-");
				this.sameCity.name = arr[arr.length - 1]
			
				console.log(arr);
				this.params.province = arr[0]
				this.params.city = arr[1]
				this.params.area = arr[2]
				
				this.page = 1;
				this.shopgoodsList = [];
				this.finished = false;
				
				
				this.$nextTick(() => {
					this.getshopgoodsdata()
				})
				
				this.getTuanGouThree();
			
			
			
				//console.log(this.params.area)
			},
			
			
			//显示地址三级联动
			showCityPicker() {
				this.$refs.mpvueCityPicker.show()
			},
			getshopgoodsdata(id) {
				if (this.finished) {
					return;
				}
				let that = this;
			
				let params = {area:this.params.area};
				//如果子分类有选中的， 测
				if (id) {
					params.id = id;
				}
			

				uni.request({
					url: "/wanlshop/bussinfo/getshopgoodsbytype",
					data: params,
					success(res) {
						if (that.shopgoodsList.length >= res.data.total) {
							that.finished = true;
						} else {
							res.data.data.forEach(item=>{
								item.gtitle = item.gtitle.substring(0,10)
							})
							that.shopgoodsList = that.shopgoodsList.concat(res.data.data);
							that.page++
						}
					}
				})
			},
			
			
			
			handleShop(id) {
				//this.$wanlshop.to(`/pages/shop/index?id=${id}`);
				this.$wanlshop.to(`/pages/shop/product/list?shop_id=${id}`);
			},
			
			
			
			
			
			getshopgoodsbytype(item, tag) {
				//tag 0 表示点击的是主分类的  tag 1 表示点击的是子分类的
				if (tag == 0) {
					//此时要更换一下，下面的一排子分类
					this.getsubtype(item.id);
					this.selectParentType = item;
					this.parentIndex = this.typeList.findIndex(it => {
						return item.id == it.id;
					})
					this.selectSubType = {}
					this.subindex = "";
				} else {
					this.selectSubType = item;
					this.subindex = this.subtypeList.findIndex(it => {
						return item.id == it.id
					})
					console.log(this.subindex);
				}
			
				this.shopgoodsList = [];
				this.page = 1;
				this.finished = false;
				//通过分类找下面的 shopgoodslist
				this.getshopgoodsdata(item.id)
			},
			
			
			
			getsubtype(id) {
				let that = this;
				let params = {
					id
				};
				uni.request({
					url: "/wanlshop/bussinfo/getsubtype",
					data: params,
					success(res1) {
						that.subtypeList = res1.data.data
					}
				})
			},
			
			getTypes() {
				let that = this;
				uni.request({
					url: "/wanlshop/bussinfo/tuangoutypes",
					success(res) {
						that.typeList = res.data.data;
						//找到数组中的第一个类别，再找它的子类
						if (that.typeList.length > 0) {
							let firstType = that.typeList[0];
							that.getsubtype(firstType.id);
			
			
						}
					}
				})
			},
			
			
			initgetshopgoods() {
				let that = this;
				
				let params = {
					area: this.params.area
				}
				
				
				console.log(params);
				
				uni.request({
					url: "/wanlshop/bussinfo/initgetshopgoodsbytype",
					data:params,
					success(res) {
						res.data.data.forEach(item=>{
							item.gtitle = item.gtitle.substring(0,10)
						})
						that.shopgoodsList = res.data.data
					}
				})

			},

			
			
			
			getTuanGouThree(){
				let that = this;
				let params = {area:this.params.area};
				uni.request({
					url:"/wanlshop/shop/getThreeShopGoods",
					data:params,
					success(res){
						that.tuangouThree = res.data.data;
						console.log(that.tuangouThree)
					}
				})
			},
			
			
			//获取轮播图
			getBanners(){
				uni.request({
					url: '/common/banners?type=2',
					success: res => {
						this.bannersList = res.data
					}
				});
			},
			
			
			gototuangou(){
				uni.navigateTo({
					url:"/pages/shop/tuangou"
				})
			},
			
			
			
			handleShop(id) {
				//this.$wanlshop.to(`/pages/shop/index?id=${id}`);
				this.$wanlshop.to(`/pages/shop/product/list?shop_id=${id}`);
			},
			
			
			
			getBussinfoList(){
				uni.request({
					url: '/wanlshop/bussinfo/getBussinfoListDs',
					success:(res)=>{
						if(res.res.code == 1){
							this.bussinfoList = res.res.data;
							console.log(this.bussinfoList);
							
							this.subbussinfo = this.group(this.bussinfoList,8);
							console.log(this.subbussinfo);
							
						}
					}
				})
			},
			
			
			group(array, subGroupLength) {
			      let index = 0;
			      let newArray = [];
			      while(index < array.length) {
			          newArray.push(array.slice(index, index += subGroupLength));
			      }
			      return newArray;
			  },
			
			getAddress() {
				let that = this;
			
				//测试段——————————————————————————————————————————————————
				if(config.test){
					return new Promise((resolve, reject) => {
					if (Object.keys(this.$store.state.common.addressData).length > 0) {
						resolve("ok");
					}
					let add = {
						latitude: 32.1524,
						longitude: 111.372,
						address: {
							city: "襄阳市",
							citycode: "0710",
							country: "中国",
							district: "谷城县",
							province: "湖北省",
							towncode: "420625500000",
							township: "薤山林场",
							latitude: 32.1524,
							street: "汉和路",
							longitude: 111.372,
							neighborhood: {
								name: "小吃街"
							}
						}
					};
			
			
			
					this.$store.commit('common/setAddress', add);
			
					let res2 = this.$store.state.common.addressData;
					if (Object.keys(res2).length !== 0) {
						that.params.province = res2.address.province
						that.params.city = res2.address.city
						that.params.area = res2.address.district
						that.sameCity.name = that.params.area
					}
			
			
					resolve("ok")
			
				})
				}else{
					return new Promise((resolve,reject)=>{
						if(Object.keys(this.$store.state.common.addressData).length > 0){
							
							console.log(this.$store.state.common.addressData);
							
							let res2 = that.$store.state.common.addressData
							if (Object.keys(res2).length !== 0) {
								that.params.province = res2.address.province
								that.params.city = res2.address.city
								that.params.area = res2.address.district
								that.sameCity.name = that.params.area
							};
							resolve("ok");
						}
						let qqmapsdk = new qqmapwx({
							key: '7LHBZ-JGG6W-72RR6-YDOJY-LNRCS-FVB55' //后端给的key
						});
					
					
						uni.getLocation({
							type: 'gcj02',
							geocode: true,
							isHighAccuracy: true,
							altitude: true,
							success: res => {
								const latitude = res.latitude;
								const longitude = res.longitude;
								// const latitude = 32.1637;
								// const longitude = 111.3922;
								qqmapsdk.reverseGeocoder({
									location: {
										latitude,
										longitude
									},
									success: function(res1) {
					
										let address = res1.result.address_component;
										address.township = res1.result.address_reference.town.title;
					
										try {
											address.neighborhoodname = res1.result.address_reference.street
												.title ? res1.result.address_reference.street.title : "";
											address.street = res1.result.address_reference.street.title ?
												res1.result.address_reference.street.title : "";
										} catch (err) {
											address.neighborhoodname = "";
											address.street = ""
										}
					
					
					
										address.neighborhood = {
											name: address.neighborhoodname
										};
										const addressData = {
											address: address,
											latitude: latitude,
											longitude: longitude,
											township: address.township,
											neighborhood: {
												name: address.neighborhoodname
											}
										}
										address.longitude = longitude;
										address.latitude = latitude;
					
										uni.setStorageSync('addressData', JSON.stringify(
											address)); /*全局缓存相关的数据*/
										that.$store.commit('common/setAddress', addressData);
					
										let res2 = that.$store.state.common.addressData
										if (Object.keys(res2).length !== 0) {
											that.params.province = res2.address.province
											that.params.city = res2.address.city
											that.params.area = res2.address.district
											that.sameCity.name = that.params.area
											if (res2.address.district == "谷城县") {
												if (uni.getStorageSync("wanlshop:user")) {
													//查询红包是否开启
													uni.request({
														url: "/wanlshop/local_life/redenvelopestatus",
														success(res) {
															if (res.data.canget == 1) {
																that.$refs.redenvelopepopup.open();
															}
														}
													})
												}
											}
					
										}
										resolve("ok")
					
									},
									fail: function(error) {
										reject(error)
									},
									complete: function(res) {
										resolve("ok")
									}
								})
					
							}
						});
					
					
					
					})
					
				}
				
			
			
				// 测试段——————————————————————————————————————————————————
			
			
				
			
			
			
			},
			
			
			
			// getAddress(){
			// 	let res = this.$store.state.common.addressData
			// 	if(Object.keys(res).length !== 0){					
			// 		this.params.longitude = res.longitude
			// 		this.params.latitude = res.latitude
					
			// 		let _addressData = uni.getStorageSync('addressData');/*全局缓存相关的数据*/
			// 		if(_addressData){
			// 			let addressData = JSON.parse(_addressData); 
			// 			if(addressData.province)this.params.province = addressData.province;
			// 			if(addressData.city)this.params.city = addressData.city;
			// 			if(addressData.district)this.params.area = addressData.district;  
			// 		}else{
			// 			this.params.province = res.address.province
			// 			this.params.city = res.address.city
			// 			this.params.area = res.address.district
			// 		}
			// 	}		
			// }
					
		}
	}
</script>

<style lang="scss" scoped>

.wrapper{
	width:100%;
	min-height:100vh;
	background:#FFF5F5;
	
	.outtop{
		width:100%;
		height:500rpx;
		background:linear-gradient(to bottom,#FE490C,#F7E6E4);
		padding-left:24rpx;
		padding-right:24rpx;
		box-sizing: border-box;
		.topwrapper{
			box-sizing: border-box;
			display:flex;
			justify-content: space-between;
			align-items: center;
			.tit{
				flex:1;
				text-align: center;
				transform: translate(-28%);
				color:#fff;
			}
			.addressSelect{
				display:flex;
				justify-content: flex-start;
				align-items: center;
				color:#fff;
				min-width: 220rpx;
				.downicon{
					margin-left:16rpx;
					width:0;
					height:0;
					border-left:10rpx solid transparent;
					border-right:10rpx solid transparent;
					border-top:16rpx solid #fff;
				}
			}
		}
		.search{
			margin:0 auto;
			margin-top:30rpx;
			width:700rpx;
			background:#fff;
			border-radius: 30rpx;
			height:60rpx;
			display:flex;
			justify-content: flex-start;
			align-items: center;
			color:#aaa;
			padding:0 30rpx;
			box-sizing: border-box;
		}
		.swiperwrapper{
			width:100%;
			display:flex;
			justify-content: center;
			align-items: center;
			margin-top:40rpx;
			.swiper{
				width:730rpx;
				height:300rpx;
				border-radius: 30rpx;
				overflow: hidden;
				.sitem{
					width:730rpx;
					height:300rpx;
					background:hotpink;
					border-radius:30rpx;
					overflow: hidden;
					image{
						width:730rpx;
						height:300rpx;
						border-radius:30rpx;
						overflow: hidden;
					}
				}
			}
		}
	}
	
	.menuwrapper{
		.menuswiper{
			width:100%;
			height:280rpx;
			.menuitemwrapper{
				width:100%;
				height:280rpx;
				display:flex;
				justify-content: flex-start;
				flex-flow:row wrap;
				.menuitem{
					width:25%;
					height:140rpx;
					display:flex;
					flex-flow:column nowrap;
					justify-content: center;
					align-items: center;
					image{
						width:80rpx;
						height:80rpx;
					}
					.name{
						color:#333;
						font-size:26rpx;
					}
				}
			}
		}
	}
	
	.flwrapper{
		width:100%;
		height:264rpx;
		image{
			width:750rpx;
			height:264rpx;
			margin-top:-30rpx;
		}
	}
	.tagwrapper{
		margin-top:-30rpx;
		width:100%;
		display:grid;
		grid-template-columns:1fr 1fr;
		//grid-template-rows:1fr 1fr;
		grid-template-rows:1fr;
		row-gap: 16rpx;
		column-gap: 26rpx;
		padding:0 20rpx;
		box-sizing: border-box;
		grid-template-areas:"tg tg";
							//"pt tj";
						
		.tgwrapper{
			grid-area:tg;
			background:linear-gradient(to bottom,#FFD2D1 20%,#FFF3F3 50%,#fff);
			border-radius: 20rpx;
			width:100%;
			height:352rpx;
			padding:30rpx;
			box-sizing: border-box;
			.title{
				display:flex;
				width:100%;
				justify-content: space-between;
	
				height:60rpx;
				.name{
					font-size:28rpx;
					font-weight: bold;
				}
				.desc{
					color:#aaa;
					font-size:26rpx;
				}
			}
			.prolist{
				display:flex;
				justify-content: space-between;
				align-items: center;
				.item{
					position: relative;
					width:192rpx;
					image{
						width:192rpx;
						height:218rpx;
						border-radius: 15rpx;
					}
					.name{
						position:absolute;
						bottom:0rpx;
						background:rgba(255,255,255,.2);
						color:#fff;
						height:56rpx;
						line-height:50rpx;
						width:192rpx;
						text-align: center;
						left:0;
						font-size:24rpx;
					}
					.price{
						position:absolute;
						left:0;
						top:0;
						color:#fff;
						height:40rpx;
						padding:3rpx 15rpx 3rpx 10rpx;
						background:#FC8E76;
						border-radius: 15rpx 0 20rpx 0;
						
					}
				}
			}
			
		}
		.ptwrapper{
		
			grid-area:pt;
			background:#FEB086;
			border-radius: 20rpx;
			width:100%;
			height:310rpx;
			padding:20rpx 20rpx 10rpx 20rpx;
			box-sizing: border-box;
			.title{
				display:flex;
				width:100%;
				justify-content: flex-start;
				height:60rpx;
				.name{
					font-size:28rpx;
					font-weight: bold;
				}
				.desc{
					margin-left:30rpx;
					color:#eee;
					font-size:26rpx;
				}
			}
			.prolist{
				display:flex;
				justify-content: space-between;
				align-items: center;
				.item{
					position: relative;
					width:140rpx;
					image{
						width:132rpx;
						height:150rpx;
						border-radius: 10rpx;
					}
					.name{
						color:#fff;
						height:56rpx;
						line-height:50rpx;
						width:140rpx;
						text-align: center;
						font-size:24rpx;
					}
					.price{
						position:absolute;
						left:0;
						top:0;
						color:#fff;
						height:40rpx;
						padding:3rpx 15rpx 3rpx 10rpx;
						background:#FC8E76;
						border-radius: 10rpx 0 20rpx 0;
						
					}
				}
			}
			
		}
		.tjwrapper{
			grid-area:tj;
			background:#FB9794;
			border-radius: 20rpx;
			width:100%;
			height:310rpx;
			padding:20rpx 20rpx 10rpx 20rpx;
			box-sizing: border-box;
			.title{
				display:flex;
				width:100%;
				justify-content: flex-start;
				height:60rpx;
				.name{
					font-size:28rpx;
					font-weight: bold;
				}
				.desc{
					margin-left:30rpx;
					color:#eee;
					font-size:26rpx;
				}
			}
			.prolist{
				display:flex;
				justify-content: space-between;
				align-items: center;
				.item{
					position: relative;
					width:140rpx;
					image{
						width:132rpx;
						height:150rpx;
						border-radius: 10rpx;
					}
					.name{
						color:#fff;
						height:56rpx;
						line-height:50rpx;
						width:140rpx;
						text-align: center;
						font-size:24rpx;
					}
					.price{
						position:absolute;
						left:0;
						top:0;
						color:#fff;
						height:40rpx;
						padding:3rpx 15rpx 3rpx 10rpx;
						background:#FC8E76;
						border-radius: 10rpx 0 20rpx 0;
						
					}
				}
			}
			
		}
	}
	.smallmenuwrapper{
		width:100%;
		height:60rpx;
		display:flex;
		justify-content: flex-start;
		align-items: center;
		margin-top:0rpx;
		.smallwrapper{
			width:750rpx;
			height:60rpx;
			overflow-x: scroll;
			white-space: nowrap;
			.smallitem{
				display:inline-block;
				height:60rpx;
				line-height: 60rpx;
				padding:0 30rpx;
				font-size:28rpx;
				color:#aaa;
			}
			.active{
				color:#FA6964;
				position:relative;
				font-weight: bold;
				&::after{
					content: "";
					width:30rpx;
					height:6rpx;
					background:#FA6964;
					position: absolute;
					bottom:4rpx;
					left:50%;
					transform: translate(-50%,100%);
				}
			}
		}
	}
	.guesswrapper{
		margin-top:20rpx;
		display:flex;
		justify-content: flex-start;
		align-items: center;
		padding:0 30rpx;
		box-sizing: border-box;
		width:100%;
		height:60rpx;
		line-height: 60rpx;
		.title{
			font-size:28rpx;
			font-weight: bold;
		}
		.desc{
			color:#aaa;
			font-size:24rpx;
			padding-left:20rpx;
		}
	}
	.listwrapper{
		width:100%;
		padding:0 20rpx 20rpx;
		box-sizing: border-box;
		display:flex;
		justify-content: flex-start;
		align-items: flex-start;
		flex-flow:row wrap;
		background:#fff5f5;
		.itemwrapper{
			margin-top:20rpx;
			display:flex;
			flex-flow: column nowrap;
			align-items: center;
			justify-content: space-between;
			width:330rpx;
			box-sizing: border-box;
			margin-left:20rpx;
			.pic{
				width:330rpx;
				height:320rpx;
				border-radius:15rpx 15rpx 0 0;
				overflow: hidden;
			}
			.descwrapper{
				background:#fff;
				border-radius: 0 0 15rpx 15rpx;
				width:100%;
				padding:0rpx 0rpx 10rpx 20rpx;
				box-sizing: border-box;
				.namewrapper{
					height:60rpx;
					display:flex;
					justify-content: space-between;
					align-items: center;
					image{
						width:48rpx;
						height:48rpx;
					}
				}
				.pricewrapper{
					display:flex;
					justify-content: flex-start;
					align-items: center;
					height:30rpx;
					.price{
						color:#F94949;
						font-size:28rpx;
						font-weight: bold;
					}
					.oldprice{
						color:#aaa;
						text-decoration: line-through;
						font-size:24rpx;
						margin-left:15rpx;
					}
				}
			}
		}
	}

}

</style>
